<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions"
                xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">

    <p:outputPanel id="main_folder_details" layout="block" style="display: flex;">
        <div style="width: 15%; text-align: center">
            <h:form id="photo-cantainer-form">
                <p:outputPanel layout="block" id="photo-panel"
                               styleClass="photo-cantainer ui-widget ui-widget-content ui-corner-all"
                               style="margin: 0 auto">
                    <p:graphicImage value="#{imageAdministrationBean.folderImage}" width="150" height="150" cache="false"/>

                    <p:contextMenu for=":photo-cantainer-form:photo-panel" style="z-index: 50">
                        <p:menuitem value="De pe disk"/>
                        <p:menuitem value="Web cam" oncomplete="PF('webcam_WV').show();" update=":webcam_form" process="@this" actionListener="#{imageAdministrationBean.initWebCamDialog}"/>
                    </p:contextMenu>
                </p:outputPanel>

                <p:selectOneMenu id="order_type_groups" filter="true" filterMatchMode="startsWith" var="o"
                                 converter="#{objectMappingConverter}"
                                 disabled="#{folderAdministrationBean.orderGroupDisabled()}" style="margin-top: 4px;text-align: left;width: 150px">
                    <f:selectItem itemLabel="Creaza ordin nou"
                                  noSelectionOption="true"/>
                    <f:selectItems value="#{folderAdministrationBean.orderTypeGroups}" var="order"
                                   itemLabel="#{order.name}"
                                   itemValue="#{order}"/>

                    <p:column style="width: 10%;">
                        <p:outputPanel layout="block" styleClass="#{o.icon}"/>
                    </p:column>

                    <p:column>
                        <h:outputText value="#{o.name}"/>
                    </p:column>

                    <p:ajax listener="#{orderAdministrationBean.onOrderGroupSelect}"
                            oncomplete="if (args.transfer) {TreeCustomBehavior.onTransferOn();} else { orderWV.show(); }"
                            process="@this" update=":order_dialog"/>
                </p:selectOneMenu>
            </h:form>
        </div>

        <div style="width: 85%">
            <pe:spotlight id="form_spotlight" blocked="#{folderAdministrationBean.selectedFolder.editable}"
                          style="padding-top:5px;padding-left:5px;margin-left:10px;"
                          styleClass="ui-widget ui-widget-content ui-corner-all">

                <h:form id="folder-info-form">

                    <p:selectBooleanButton value="#{folderAdministrationBean.selectedFolder.editable}"
                                           offLabel="Editeaza" onLabel="Saveaza">
                        <p:ajax event="change" listener="#{folderAdministrationBean.savePersonalInfo}"
                                process=":form_spotlight" update=":form_spotlight"/>
                    </p:selectBooleanButton>

                    <p:commandLink value="Anuleaza" update=":form_spotlight" process="@this"
                                   rendered="#{folderAdministrationBean.selectedFolder.editable}" resetValues="true">
                        <f:setPropertyActionListener target="#{folderAdministrationBean.selectedFolder.editable}"
                                                     value="false"/>
                    </p:commandLink>

                    <p:watermark value="Introduceti prenumele" for="firstName"/>
                    <pe:tooltip global="true" myPosition="left center" atPosition="right center" for="@(.ui-state-error)"/>

                    <div class="input-panel" style="display: flex;">

                        <h:panelGrid columns="2" width="33%" columnClasses="column-1">
                            <p:outputLabel for="firstName" value="Prenumele:"/>
                            <p:inputText id="firstName" value="#{folderAdministrationBean.selectedFolder.firstName}"
                                         required="true" title="#{component.valid ? '' : 'Prenumele este necesar'}"
                                         disabled="#{!folderAdministrationBean.selectedFolder.editable}"/>

                            <p:outputLabel value="Numele:"/>
                            <p:inputText value="#{folderAdministrationBean.selectedFolder.lastName}" required="true"
                                         disabled="#{!folderAdministrationBean.selectedFolder.editable}"/>

                            <p:outputLabel value="Patronimic:"/>
                            <p:inputText value="#{folderAdministrationBean.selectedFolder.patronymic}" required="true"
                                         disabled="#{!folderAdministrationBean.selectedFolder.editable}"/>

                            <p:outputLabel value="Data nasterii:"/>
                            <p:calendar value="#{folderAdministrationBean.selectedFolder.birthDate}"
                                        required="true"
                                        disabled="#{!folderAdministrationBean.selectedFolder.editable}">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </p:calendar>

                            <p:outputLabel value="Sex:"/>
                            <p:selectOneRadio id="sex" value="#{folderAdministrationBean.selectedFolder.sex}"
                                              converter="#{selectComponentConverter}"
                                              disabled="#{!folderAdministrationBean.selectedFolder.editable}">
                                <f:selectItem itemLabel="Male" itemValue="0"/>
                                <f:selectItem itemLabel="Female" itemValue="1"/>
                            </p:selectOneRadio>
                        </h:panelGrid>

                        <h:panelGrid styleClass="input-panel" columns="2" width="33%" columnClasses="column-1">
                            <p:outputLabel value="Nationalitatea:"/>
                            <p:selectOneMenu id="nationality"
                                             value="#{folderAdministrationBean.selectedFolder.nationality}"
                                             converter="#{selectComponentConverter}" required="true"
                                             disabled="#{!folderAdministrationBean.selectedFolder.editable}">
                                <f:selectItem itemLabel="Selectati nationalitatea"/>
                                <f:selectItems value="#{applicationStateBean.nationalities}" var="n"
                                               itemLabel="#{n.name}"
                                               itemValue="#{n.id}"/>
                            </p:selectOneMenu>

                            <p:outputLabel value="Starea familiala:"/>
                            <p:selectOneMenu id="family-status"
                                             value="#{folderAdministrationBean.selectedFolder.familyStatus}"
                                             converter="#{selectComponentConverter}" required="true"
                                             disabled="#{!folderAdministrationBean.selectedFolder.editable}">
                                <f:selectItem itemLabel="Selectati starea familiala"/>
                                <f:selectItems value="#{applicationStateBean.familyStatuses}" var="fs"
                                               itemLabel="#{fs.name}"
                                               itemValue="#{fs.id}"/>
                            </p:selectOneMenu>

                            <p:outputLabel value="Cod IDNP:"/>
                            <p:inputText value="#{folderAdministrationBean.selectedFolder.IDNP}" required="true"
                                         disabled="#{!folderAdministrationBean.selectedFolder.editable}"/>

                            <p:outputLabel value="Domiciliul:"/>
                            <p:inputText value="#{folderAdministrationBean.selectedFolder.residenceVisa}"
                                         required="true"
                                         disabled="#{!folderAdministrationBean.selectedFolder.editable}"/>

                            <p:outputLabel value="Tel. de contact:"/>
                            <p:inputText value="#{folderAdministrationBean.selectedFolder.contactData}" required="true"
                                         disabled="#{!folderAdministrationBean.selectedFolder.editable}"/>
                        </h:panelGrid>

                        <h:panelGrid styleClass="input-panel" columns="2" width="33%" columnClasses="column-1">
                            <p:outputLabel value="Data angajarii:"/>
                            <h:outputText value="#{folderAdministrationBean.selectedFolder.employedDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:outputText>

                            <p:outputLabel value="Starea dosar:"/>
                            <h:outputText value="#{folderAdministrationBean.selectedFolder.folderState.name}"/>

                            <p:outputLabel value="Membru sindicat:" />
                            <h:outputText value="#{folderAdministrationBean.selectedFolder.syndicateMember ? 'Da' : 'Nu'}"/>

                        </h:panelGrid>
                    </div>
                </h:form>
            </pe:spotlight>
        </div>
    </p:outputPanel>

</ui:composition>